<template>
	<view>
		<!-- 我的余额 -->
		<view class="balance">
			<view class="top">
				<text>账户余额</text>
				<text>{{ info.wx_balance || 0.00 }}</text>
			</view>
			<view class="butbox" @click="navWXTopUp()">
				微信充值
			</view>
		</view>
		<!-- 积分明细 -->
				<view class="balance_details" v-for="item in list" :key="`record-${item.time}`">
					<view class="title">
						<text>充值明细</text>
						<!-- <text>支出：￥{{ getTotalPay(item.list) }}</text> -->
					</view>
					<view class="date">
						<view class="date_content">
							<view class="text"><text>{{ item.time.split('-')[1] }}</text>月<text>{{ item.time.split('-')[0] }}</text>
							</view>
							<view @click="sequence = !sequence">
								<image src="@/static/down@1.png" v-if="sequence"></image>
								<image src="../../static/top@1.png" v-else></image>
							</view>
						</view>
						<view>
							收入：￥{{ getTotalReceive(item.list) }}
						</view>
					</view>
					<view class="content_box">
						<view class="item" v-for="ite in item.list" :key="`record-item-${item.id}`">
							<view class="left">
								<text>{{ ite.memo }}</text>
								<text>{{ ite.createtime*1000 | dateFormat }}</text>
							</view>
							<view class="right" :style="{
								color:ite.type!=2?'#F94D29':'#222222'
							}">+￥{{ ite.money }}</view>
						</view>
					</view>
				</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sequence: false,
			info: null,
			list: [],
			myinfo:{},
		};
	},
	onShow() {
		// this.tableList()
		this.getInfo()
		this.getmyinfo()
	},
	methods: {
		getInfo() {
			this.$http({
				url: 'api/Wechat/wxRechargeList',
			}).then(res => {
				this.info = res.data
				let list = res.data.list
				let obj = {}
				list.forEach(item => {
					let date = new Date(item.createtime * 1000)
					let year = date.getFullYear()
					let month = date.getMonth() + 1
					let key = `${year}-${month}`
					if (obj[key]) {
						obj[key].push(item)
					} else {
						obj[key] = [item]
					}
				})
				let arr = []
				for (let key in obj) {
					arr.push({
						time: key,
						list: obj[key]
					})
				}
				this.list = arr
				if (this.list.length == 0) {
					this.kong = false
				} else {
					this.kong = true
				}
			})
		},
		tableList() {
			this.$http({
				url: 'api/wechat/getCardBalance',
				data: {
					card_no: '8888100000012854',
					card_pin: '223872'
				}
			}).then(res => {
				console.log(res, '....余额')
			})
		},
		// 跳转微信充值
		navWXTopUp() {
			if (this.myinfo.mainPhone) {
				uni.navigateTo({
					url: "/personalData/WXTopUp/WXTopUp",
					//personalData/records/records
				})
			}else{
				uni.navigateTo({
					url: "/personalData/personalInfo/personalInfo"
				})
			}
			
		},
		getmyinfo() {
			this.$http({
				url: 'api/Wechat/userinfo'
			}).then(res => {
				this.myinfo = res.data
			})
		},
		// 跳转提货卷充值
		navJuanTopUp() {
			uni.navigateTo({
				url: "/personalData/juanTopUp/juanTopUp"
			})
		},
		// 跳转微信充值
		// navWXTopUp() {
		// 	uni.navigateTo({
		// 		url: "/personalData/records/records"
		// 	})
		// },
		getTotalPay(list){
			return list.filter(item=>item.type==1).map(item=>+item.money).reduce((total,cur)=>total+cur,0)
		},
		getTotalReceive(list){
			return list.map(item=>+item.money).reduce((total,cur)=>total+cur,0)
		}
	}
}
</script>

<style lang="scss" scoped>
// 我的余额
.balance {
	width: 690rpx;
	height: 198rpx;
	// background: linear-gradient(315deg, #F99529 0%, #F94D29 100%);
	border-radius: 30rpx 30rpx 30rpx 30rpx;
	margin: 0 30rpx 24rpx 30rpx;
	background-image: url("https://zdcloud.zxkjnc.com/images/642bed5.png");
	background-size: 100% 100%;
	display: flex;
	// flex-direction: column;
	justify-content: space-between;
	align-items: center;

	.top {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 30rpx;

		text:first-child {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 1em;
			margin-top: 40rpx;
		}

		text:last-child {
			margin-top: 34rpx;
			line-height: 1em;
			font-size: 56rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.butbox{
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #1A1A1A;
		width: fit-content;
		padding: 0 20rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		border-radius: 28rpx;
		margin-right: 30rpx;
		background-color: #FFF;
	}

	.down {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;

		.down_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 50%;

			text:first-child {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 1em;
			}

			text:last-child {
				margin-top: 34rpx;
				margin-bottom: 36rpx;
				line-height: 1em;
				font-size: 40rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
}

// 充值
.top_up {
	width: 690rpx;
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto 4rpx auto;

	.top_up_item {
		width: 334rpx;
		height: 110rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		align-items: center;

		image {
			width: 76rpx;
			height: 76rpx;
			margin: 0 24rpx 0 52rpx;
		}

		text {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			line-height: 1em;
		}
	}
}

// 余额明细
.balance_details {
	width: 690rpx;
	margin: 40rpx 30rpx 0 30rpx;

	.title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		line-height: 1em;

		text:last-child {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
		}
	}

	.date {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 28rpx;

		.date_content {
			font-size: 26rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			display: flex;
			align-items: center;

			.text {
				text:first-child {
					font-size: 36rpx;
					line-height: 1em;
				}

				text:last-child {
					margin-left: 6rpx
				}
			}

			image {
				width: 18rpx;
				height: 14rpx;
				margin-left: 14rpx;
			}
		}

		view:last-child {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
		}
	}

	.content_box {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		margin-top: 28rpx;

		.item:last-child {
			border: none;
		}

		.item {
			height: 158rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			border-bottom: 1rpx solid #ECECEC;

			.left {
				display: flex;
				flex-direction: column;
				gap: 24rpx 0;

				text:first-child {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					line-height: 1em;
				}

				text:last-child {
					font-size: 26rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #555555;
					line-height: 1em;
				}
			}

			.right {
				font-size: 36rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				line-height: 1em;
			}
		}
	}
}
// 积分明细
.integral_detail {
	width: 690rpx;
	margin: 48rpx auto 0 auto;
	padding-bottom: 20rpx;

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;

		text:first-child {
			font-size: 30rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
		}

		text:last-child {
			font-size: 24rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
		}
	}

	.title2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		margin-top: 28rpx;

		view:last-child {
			font-size: 24rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
		}

		.tiem {
			display: flex;
			justify-content: center;
			align-items: center;

			.tiem_item {
				display: flex;
				align-items: flex-end;

				.tiem1 {
					font-size: 32rpx;
					line-height: 1em;
				}

				.tiem2 {
					font-size: 26rpx;
					line-height: 1em;
				}
			}


			image {
				width: 18rpx;
				height: 14rpx;
				margin-left: 14rpx;
			}
		}
	}

	.integral_detail_content {
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 28rpx;

		.content:last-child {
			border: none;
		}

		.content {
			margin: 0 24rpx;
			padding: 40rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #ECECEC;

			.left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				:first-child {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					line-height: 1em;
					margin-bottom: 24rpx;
				}

				:last-child {
					font-size: 26rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #555555;
					line-height: 1em;
				}
			}

			.right {
				font-size: 36rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
			}
		}
	}
}
</style>